/*


	jQuery plugin: lightbox
	Author: Ian Hart at Grand Union [ianh@thegrandunion.com]


	What?
	=====
	A simple lightweight lightbox for loading pages via ajax.


	How?
	====
	Specify the selector and lightbox will do the rest.
	
	
		$('a.overlay').lightbox({
			contentSelector : '#content-main'
		});
		
	When Lightbox loads content, it checks for links and forms within and applies lightbox loading to them too.


	Options
	=======
	
	overlayID: The ID applied to the overlay element.
	contentID: The ID applied to the content element.
	contentSelector: The selector used when making the ajax call.
	callback: A function to run every time lightbox loads content.
	overlayBG: CSS background value.
	overlayOpacity: CSS opacity value.
	
	
	Dependencies
	============
	- jQuery 1.3.2 or higher (jquery.com)
	
	
*/
(function($){

	$.fn.lightbox = function(settings){

		var G = {
				config : {
					overlayID : 'lightbox-overlay',
					contentID : 'lightbox-content',
					contentSelector : 'body',
					callback : function(){},
					overlayBG : '#000',
					overlayOpacity : 0.8
				},
				$links : this,
				$elOverlay : '',
				$elContent : ''
			};
		
		if(settings){ $.extend(G.config, settings); }


		function init(el){
		
			var overlayID = G.config.overlayID,
				contentID = G.config.contentID;

			// Append and style Overlay and Content elements.
			if(el.length){
			
				if($('#'+overlayID).length===0){
				
					$('<div id="'+overlayID+'"></div><div id="'+contentID+'"></div>').appendTo($('body'));
					
					G.$elOverlay = $('#'+overlayID);
					G.$elContent = $('#'+contentID);
					
					G.$elOverlay.css({
						'width':'100%',
						'height':'100%',
						'margin':0,
						'padding':0,
						'position':'absolute',
						'top':0,
						'left':0,
						'z-index':10000,
						'background':G.config.overlayBG,
						'opacity':G.config.overlayOpacity,
						'display':'none'
					}).click(function(){
						G.$elContent.empty().hide();
						$('select').show();
						$(this).fadeOut(200);
					});
		
					G.$elContent.css({
						'position':'absolute',
						'top':0,
						'left':0,
						'z-index':20000,
						'display':'none'
					});
				
				}
				
				initLightboxLinks(G.$links);

				// Browser sniffing? What is this, 2002?
				// IE6 fires the resize event on initialisation and several million times as the window resizes 
				// causing the browser to hang. So, let's not bother with it for IE6.
				if($.browser.msie === false || ($.browser.msie === true && $.browser.version !== '6.0')){
					$(window).resize(function(){
						positionContent();
					});
				}
				
			}
			
		}
		

		function initLightboxLinks(links){
		
			var href;
	
			// Links.
			$(links).filter('a').click(function(e){
				openLightbox(this);
				e.preventDefault();
			});

			// Forms.
			$(links).filter('form').submit(function(){
				openLightbox(this);				
				return false;
			});
			
			// Find "close" link and add event.
			$('#'+G.config.contentID+' a.close-lightbox').click(function(){
				G.$elContent.empty().hide();
				G.$elOverlay.fadeOut(200);
			});
		
		}
		
		
		function openLightbox(el){
		
			// Display overlay.
			G.$elOverlay.css({
				'height':$(document).height(),
				'width':$(window).width()
			}).fadeIn(300);
			$('select').hide();
		
			
			if($(el).is('a')){
	
				G.$elContent.load($(el).attr('href')  + ' ' + G.config.contentSelector, {}, function(responseText, textStatus, XMLHttpRequest){
					displayLightbox();
				});
			
			}
			else if($(el).is('form')){

				$.ajax({
					type: 'POST',
					url: $(el).attr('action'),
					data: $(el).serialize(),
					error: function(XMLHttpRequest, textStatus, errorThrown){
						
					},
					success: function(data, textStatus){
						if(textStatus==='success'){
							find = (G.config.contentSelector!=='body') ? G.config.contentSelector: '*:first';
							html = $(data).find(find).parent(); // find('form') or find('body') doesn't seem to work!
							G.$elContent.empty().append(html);
							displayLightbox();
						}
					}
				});
			
			}
		
		}
		
		
		function displayLightbox(){
		
			positionContent();
			G.$elContent.show();
			G.$elOverlay.css('height',$(document).height());
			resetLightboxLinks();
			G.config.callback();
		
		}


		function positionContent(){
		
			var windowHeight,
				elHeight,
				intTop,
				intLeft;
				
			if(G.$elOverlay.css('display')!=='none'){

				windowHeight = $(window).height();
				elHeight = G.$elContent.height();
				intTop = ((elHeight < windowHeight) ? (windowHeight/2)-(elHeight/2) : 20) + $(window).scrollTop();
				intLeft = ($(window).width()/2)-(G.$elContent.width()/2);
		
				// If the lightbox is already visible, animate the repositioning.
				if(G.$elContent.css('display')==='none'){
					G.$elContent.css({
						'top':intTop,
						'left':intLeft
					});
				}
				else{
					G.$elContent.animate({
						'top':intTop,
						'left':intLeft
					}, 300);
				}
				
			}
			
		}
		

		function resetLightboxLinks(){
		
			var selector = G.$links.selector,
				selectorClass = selector.substring(selector.lastIndexOf('.')+1, selector.length); // Find the class used to identify lightbox links.

			initLightboxLinks($('a.'+selectorClass+', form.'+selectorClass, G.$elContent));
	
		}
		
		
		init(this);

		
		return this;
		

	};

})(jQuery);